import React, { Fragment, CSSProperties, useState, useEffect } from 'react'
import { Menu } from 'antd'
import { IDraggable } from '../../../../dnd/component_type'
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;

export default function MenuPreview (props: IDraggable) {
  const { config, data, meta } = props
  const [current, setCurrent] = useState('mail');

  const handleClick = (e: any) => {
    console.log('click ', e);
    setCurrent(e.key)
  };

  return (
    <Menu onClick={ handleClick } selectedKeys={[current]} { ...config.attr } >
      <Menu.Item key="mail">
        首页
      </Menu.Item>
      <SubMenu
        title={
          <span className="submenu-title-wrapper">
            更多
          </span>
        }
      >
        <Menu.ItemGroup title="Item 1">
          <Menu.Item key="setting:1">Option 1</Menu.Item>
          <Menu.Item key="setting:2">Option 2</Menu.Item>
        </Menu.ItemGroup>
        <Menu.ItemGroup title="Item 2">
          <Menu.Item key="setting:3">Option 3</Menu.Item>
          <Menu.Item key="setting:4">Option 4</Menu.Item>
        </Menu.ItemGroup>
      </SubMenu>
      <Menu.Item key="alipay">
        <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
          AntD
        </a>
      </Menu.Item>
    </Menu>
  );
}